<template>
  <div style="padding: 10px; background-color: #fafafa;">
    <!--功能区域-->
    <div style="margin: 10px 0;">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <!--搜索区域-->
    <div style="margin: 10px 0; display: flex; align-items: center;">
      <el-input v-model="userNameQuery" placeholder="请输入姓名查询" style="width: 20%" clearable @input="console.log('Input event triggered')"></el-input>
      <el-button type="primary" style="margin-left: 5px" size="medium" @click="searchByUsername">查询</el-button>
    </div>
    <!--表格区域-->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="birthDate" label="生日"/>
      <el-table-column prop="idCard" label="身份证"/>
      <el-table-column prop="phoneNumber" label="电话"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column prop="admissionDate" label="入住日期"/>
      <el-table-column prop="dischargeDate" label="出院日期"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column prop="bedNumber" label="床位号"/>
      <el-table-column prop="roomNumber" label="房间号"/>
      <el-table-column prop="bedStatus" label="床位状态"/>
      <el-table-column prop="contactName" label="联系人姓名"/>
      <el-table-column prop="relationship" label="所属关系"/>
      <el-table-column prop="contactPhone" label="联系人电话"/>
      <el-table-column prop="contactAddress" label="联系人地址"/>
      <el-table-column prop="contactEmail" label="联系人邮箱"/>
      <el-table-column prop="examDate" label="检查日期"/>
      <el-table-column prop="bloodPressure" label="血压"/>
      <el-table-column prop="heartRate" label="心率"/>
      <el-table-column prop="weight" label="体重"/>
      <el-table-column prop="height" label="身高"/>
      <el-table-column prop="healthNotes" label="健康状态"/>
      <el-table-column label="操作">
        <template #default="scope">
          <div style="display: flex; justify-content: center;">
            <el-button type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--底部分页-->
    <div style="margin: 10px 0;">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!--点击新增，弹出的对话框-->
    <el-dialog
        v-model="dialogVisible"
        title="提示"
        width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.gender" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              v-model="form.birthDate"
              type="date"
              placeholder="选择日期"
              style="width: 80%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="入住日期">
          <el-date-picker
              v-model="form.admissionDate"
              type="date"
              placeholder="选择日期"
              style="width: 80%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="出院日期">
          <el-date-picker
              v-model="form.dischargeDate"
              type="date"
              placeholder="选择日期"
              style="width: 80%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="检查日期">
          <el-date-picker
              v-model="form.examDate"
              type="date"
              placeholder="选择日期"
              style="width: 80%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="form.idCard" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phoneNumber" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.status" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="床位">
          <el-input v-model="form.bedNumber" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.roomNumber" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="床位状态">
          <el-input v-model="form.bedStatus" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="form.contactName" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="所属关系">
          <el-input v-model="form.relationship" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input v-model="form.contactPhone" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="联系人地址">
          <el-input v-model="form.contactAddress" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="联系人邮箱">
          <el-input v-model="form.contactEmail" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="血压">
          <el-input v-model="form.bloodPressure" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="心率">
          <el-input v-model="form.heartRate" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="form.weight" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="form.height" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-input v-model="form.healthNotes" style="width: 80%"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ElderArchive",
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      userNameQuery: '',
      nameQuery: '', // 新增的名称查询字段
      selectedIds: [] // 存储选中的行 ID
    }
  },
  methods: {
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(id) {
      request.delete("/admin/deleteElderArchiveById/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '删除成功'
          })
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          })
        }
        this.load();
      })
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      if (this.form.id) {
        request.put("/admin/editeElderArchive", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible = false;
        })
      } else {
        request.post("/admin/addElderArchive", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible = false;
        })
      }
    },
    searchByUsername() {
      request.get("/admin/selectElderArchiveByName", {
        params: {
          name: this.userNameQuery,
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    load() {
      request.get("/admin/selectElderArchivePage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    batchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的行'
        });
        return;
      }
      request.delete("/hotelRoom/deleteHotelRoomsByIds", {
        data: this.selectedIds
      }).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '批量删除成功'
          });
          this.load();
          this.selectedIds = [];
        } else {
          this.$message({
            type: "error",
            message: "批量删除失败"
          });
        }
      });
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    }
  },
  created() {
    this.load();
  },
  mounted() {
    console.log('Component mounted');
  }
}
</script>

<style scoped>
.el-input__inner {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 整体容器样式 */
.elder-archive-container {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 功能按钮样式 */
.el-button--primary {
  background-color: #795548;
  border-color: #795548;
  transition: background-color 0.3s, transform 0.3s;
}

.el-button--primary:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
}

/* 输入框样式 */
.el-input__inner {
  border: 1px solid #a1887f;
  color: #555;
}

.el-input__inner:focus {
  border-color: #795548;
}

/* 表格样式 */
.el-table {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #f5f5f5;
  color: #795548;
  font-weight: bold;
}

.el-table td {
  color: #555;
}

.el-table--striped.el-table__body tr.el-table__row--striped td {
  background-color: #f9f9f9;
}

/* 分页样式 */
.el-pagination {
  text-align: center;
}

.el-pagination button {
  background-color: #795548;
  border-color: #795548;
  color: #fff;
  transition: background-color 0.3s, transform 0.3s;
}

.el-pagination button:hover {
  background-color: #a1887f;
  transform: translateY(-2px);
}

.el-pagination.active {
  background-color: #a1887f;
  border-color: #a1887f;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.el-dialog__header {
  background-color: #795548;
  color: #fff;
  padding: 15px;
  border-radius: 10px 10px 0 0;
}

.el-dialog__title {
  font-size: 18px;
}

.el-dialog__body {
  padding: 20px;
  color: #333;
}

.el-dialog__footer.el-button {
  border-radius: 20px;
  padding: 10px 20px;
}
</style>